<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
</style>

<template>
  <div v-loading="loading">
    <!-- 操作 -->
    <div class="operation">
      <el-row type="flex" align="middle" gutter="10">
        <el-col :span="4">
          <el-autocomplete class="inline-input" v-model="rolename" placeholder="请输入角色名" ></el-autocomplete>
        </el-col>
        <el-col :span="1">
          <el-button size="small" type="primary" v-has="[role.request]" icon="el-icon-search" @click="selectRoleByName" >查询</el-button>
        </el-col>
        <el-col :span="3" :offset="16">
          <el-button size="small" type="primary" @click="addRoleName = ``;addRoleVisible = true">添加角色</el-button>
        </el-col>
      </el-row>
      <!--添加角色-->
      <template>
        <el-dialog title="添加角色" :visible.sync="addRoleVisible" width="30%" top="30vh">
          <el-form>
            <el-form-item label="角色名称" :label-width="`80px`">
              <el-col :span="20">
                <el-input v-model="addRoleName" autocomplete="off"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addRoleVisible = false">取 消</el-button>
            <el-button type="primary" @click="addRole">添 加</el-button>
          </div>
        </el-dialog>
      </template>
<!--      <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>-->
<!--&lt;!&ndash;      <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>&ndash;&gt;-->
<!--      <el-button size="small">重置</el-button>-->
<!--      <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button>-->
    </div>
    <!-- table start  -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="roleName" label="名称" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column prop="createTime" label="修改时间">
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
<!--          <el-button size="mini" type="info">编辑</el-button>-->
          <el-button size="mini" type="danger" @click="remove(list[scope.$index].id)">删除</el-button>&nbsp;
<!--          添加权限弹出框-->
          <el-button type="primary" size="mini" @click="getPermissionMenu">添加权限</el-button>
          <el-dialog title="添加权限" :visible.sync="addPermissionFormVisible" top="25vh">
            <el-form>
              <el-form-item label="角色名称" :label-width="'120px'">
                <el-col :span="22">
                  <el-input v-model="list[scope.$index].roleName" autocomplete="off" disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="权限列表" :label-width="'120px'">
                <el-select v-model="permissionMenuId" placeholder="请选择权限菜单" @change="getPermissionByMenuId(list[scope.$index].id)">
                  <el-option v-for="item in permissionMenu" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="permisssionId" placeholder="请选择权限">
                  <el-option v-for="item in permissionData" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addPermissionFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addPermission(list[scope.$index].id)">添 加</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!-- table end  -->
  </div>
</template>

<script>
import * as role from '../api/role';
import * as account from "@/api/account";
import * as permission from '../api/permission'
import {add, remove} from "../api/role";

let myMixin = {
  data: function() {
    return { role }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      rolename: "",
      list: [],
      canReset: true,
      loading: false,
      permissionData:[],
      permisssionId: "",
      permissionMenu: [],
      permissionMenuId: "",
      addPermissionFormVisible: false,
      addRoleVisible: false,
      addRoleName: ""
    }
  },
  methods: {
    fetchData() {//查询所有角色
      this.loading = true;
      role.request.r().then((res) => {
        this.list = res.data.datas;
        this.loading = false;
      });
    },
    selectRoleByName(){//根据名字查询角色
      let vm = this;
      vm.loading = true;
      role.request.requestByUsername(vm.rolename).then((res) => {
        vm.list = res.data.datas;
        vm.loading = false;
      }).catch(() => {
        vm.loading = false
      });
    },
    addPermission(roleId){//给某个角色添加权限
      let vm = this;
      vm.addPermissionFormVisible = false;
      let params = {
        'roleId': roleId,
        'permissionId': vm.permisssionId
      }
      role.add.addPermission(params).then(res => {
        if (res.data.resp_code === 0) {
          vm.getPermissionByMenuId(roleId);//添加成功后更新菜单列表
          vm.$message({
            message: '添加权限成功',
            type: 'success'
          });
        }else {
          vm.$message.error('添加权限失败');
        }
      })
    },
    getPermissionMenu() {//获取所有的菜单权限
      let vm = this;
      vm.addPermissionFormVisible = true;
      role.request.getPermissionMenu().then((res => {
        vm.permissionMenu = res.data.datas;
      }))
    },
    getPermissionByMenuId(roleId) {//根据菜单id 和角色id 查询出现在角色所没有拥有的菜单下的权限
      let vm = this;
      vm.permisssionId = "";
      let params = {
        'roleId': roleId,
        'menuId': vm.permissionMenuId
      }
      role.request.getPermissionByMenuId(params).then((res) => {
        vm.permissionData = res.data.datas;
      })
    },
    addRole(){
      let vm = this;
      vm.addRoleVisible = false;
      let param = {
        roleName: vm.addRoleName
      }
      //判断角色名是否为null
      if ("" === vm.addRoleName) {
        vm.$message.error('角色名不能为空');
        return;
      }
      role.add.addRole(param).then((res) => {
        if (res.data.resp_code == 1) {
          vm.$message.error(res.data.resp_msg);
          return;
        }
        vm.list = res.data.datas;
        vm.$message({
          message: '添加角色成功',
          type: 'success'
        });
      })
    },
    remove(roleId){
      let vm = this;
      role.remove.removeRole(roleId).then((res) => {
        vm.list = res.data.datas;
        if (res.data.resp_code === 0) {
          vm.$message({
            message: '删除成功',
            type: 'success'
          });
        }else {
          vm.$message.error(`删除失败`);
        }
      })
    }
  },
  created() {
    this.fetchData();
  }
}
</script>